<template>
  <div>
    <!-- 面包屑导航 -->
    <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>首页</el-breadcrumb-item>
    </el-breadcrumb> -->

    <div class="index">
      <h2><i class="el-icon-s-data"></i>充电桩</h2>
      <div class="index-nav">
        <div class="index-left">
          <ul>
            <li>
              今日充电次数
              <span>{{ count }}</span>
            </li>
            <!-- <li>
              今日充电总度数
              <span>256</span>
            </li> -->
            <li>
              今日充电总金额（元）
              <span>{{ amountCount / 10000 }}</span>
            </li>
          </ul>
          <!-- 为ECharts准备一个定义了的DOM -->
          <div id="myChart" style="width: 700px; height: 400px"></div>
        </div>
        <div class="index-right">
          <h4><i class="el-icon-menu"></i>今日充电订单</h4>
          <!-- 列表 -->
          <el-table size="small" :data="DDData" element-loading-text="拼命加载中" style="width: 100%;">
            <el-table-column align="center" prop="orderNum" label="订单编号" width="200"></el-table-column>
            <el-table-column align="center" prop="totalMoney" label="订单金额" width="120">
              <template slot-scope="scope">
                <div>{{ scope.row.totalMoney / 1000000 }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="createTime" label="订单时间" width="150">
              <template slot-scope="scope">
                <div>{{ transformDate(scope.row.createTime) }}</div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getAdminDateStationOrderList,
  getAdminStationOrderList
} from "../../api/userMG";
export default {
  data() {
    return {
      ZXData: [],
      DDData: [],
      count: '',
      amountCount: '',
      dates: [],
      countAmounts: [],
      counts: []
    }
  },
  created() {
    this.getZXdata(1)
    this.getDDdata(1)

  },
  mounted() {
    this.drawLine()
  },
  methods: {
    // 获取订单数据
    getDDdata(page) {
      this.loading = true;
      var parameter = {
        page: (page - 1) * 20,
      };
      getAdminStationOrderList(parameter).then((res) => {
        this.loading = false;
        if (res.code != 200) {
          this.$Message({
            type: "info",
            message: res.msg,
          });
        } else {
          this.DDData = res.data.orderList;
          this.count = res.data.count;
          this.amountCount = res.data.amountCount;
          return;
        }
      })
    },
    // 获取数据
    getZXdata(page) {
      this.loading = true;
      var parameter = {
        page: (page - 1) * 20,
      };
      getAdminDateStationOrderList(parameter).then((res) => {
        this.loading = false;
        if (res.code != 200) {
          this.$Message({
            type: "info",
            message: res.msg,
          });
        } else {
          this.ZXData = res.data.orderList1;
          this.dates = this.ZXData.map(item => (item.date));
          this.counts = this.ZXData.map(item => (item.count));
          this.countAmounts = this.ZXData.map(item => (item.countAmount));
          this.countAmounts = this.countAmounts.map(function (item) {
            return item / 10000
          })
          console.log('this.countAmounts', this.countAmounts);
          this.drawLine();
        }
      })
    },
    drawLine() {
      // 1.获取ECharts的DOM节点
      const chartDom = document.getElementById('myChart');
      // 2.基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(chartDom);
      // 3.指定图表的配置项和数据
      const option = {
        // title: {
        //   text: '充电桩'
        // },
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'cross' }
        },
        legend: {
          orient: 'vertical',  //垂直显示
          x: 'right',
          y: 'center',
          data: ['充电次数', '充电总度数', '充电总金额']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',//x轴表示类别
          boundaryGap: true,//坐标轴两边留白策略
          axisTick: {
            alignWithLabel: true
          },
          data: this.dates
        },
        yAxis: {
          type: 'value',//y轴表示数值
        },
        series: [
          {
            name: '充电次数',
            data: this.counts,
            type: 'line',
            stack: 'Total',
            smooth: true,//是否平滑曲线显示
            // areaStyle: {
            //   color: 'pink',
            // }
          },
          // {
          //   name: '充电总度数',
          //   type: 'line',
          //   stack: 'Total',
          //   data: [220, 182, 191, 234, 290, 88]
          // },
          {
            name: '充电总金额',
            type: 'line',
            stack: 'Total',
            data: this.countAmounts
          },

        ]
      }
      // 4.使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    }
  }
}
</script>

<style>
.index-nav {
  display: flex;
}

.index-left ul {
  display: flex;

}

.index-left ul li {
  list-style: none;
  width: 180px;
  height: 90px;
  border: 1px solid rgb(234, 234, 234);
  margin-right: 10px;
  border-radius: 10px;
  padding: 14px;
}

.index-left ul li span {
  display: block;
  font-size: 28px;
  margin-top: 30px;
  margin-left: 10px;
  color: rgb(58, 150, 255);
}

.index-right {
  margin-top: -52px;
  margin-left: 40px;
}
</style>